<template>
  <div class="mainConfigTree">
    <div class="root">
      <Button @click="addRoot">
        <Icon type="md-add" />
      </Button>
    </div>
    <Tree :data="treeData" multiple ref="tree"></Tree>
    <div class="mainButton">
      <Button @click="submit">保存</Button>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "configTree",
  data() {
    return {
      resData: [],
      treeData: []
    };
  },
  mounted() {
    this.getTreeData();
    this.updateRenderGrand(this.renderGrand);
  },
  methods: {
    ...mapActions("oneMapConfig", ["updateRenderGrand"]),
    getTreeData() {
      this.axios.get("/tree").then(res => {
        if (res.data.code == 200 && res.data.data.length > 0) {
          this.treeData = this.resManage(res.data.data);
        } else {
          let fiveChildData = {
            title: "",
            render: this.renderGrand
          };
          let fourChildData = {
            title: "",
            children: [fiveChildData],
            expand: true,
            render: this.renderChild
          };
          let threeChildData = {
            title: "",
            children: [fourChildData],
            expand: true,
            render: this.renderThirdNode
          };
          let twoChildData = {
            title: "",
            children: [threeChildData],
            expand: true,
            render: this.renderTwoNode
          };
          let parentData = {
            title: "",
            children: [twoChildData],
            expand: true,
            render: this.renderParent
          };
          this.treeData.push(parentData);
        }
        this.saveTree();
      });
    },
    resManage(inputData) {
      let result = [];
      inputData.forEach(item => {
        let regex1 = /nodeName/g;
        let regex2 = /serviceName/g;
        let regex3 = /expend/g;
        let tempstr = JSON.stringify(item);
        let temp1 = tempstr.replace(regex1, "title");
        let temp2 = temp1.replace(regex2, "title");
        let temp3 = temp2.replace(regex3, "expand");

        result.push(JSON.parse(temp3));
      });

      result.forEach(item1 => {
        if (item1.children && item1.children.length > 0) {
          item1.children.forEach(item2 => {
            if (item2.children && item2.children.length > 0) {
              item2.children.forEach(item3 => {
                if (item3.children && item3.children.length > 0) {
                  this.addChildren(item3.children);
                }
              });
              this.addChildren(item2.children);
            }
          });
          this.addChildren(item1.children);
        }
      });
      this.addChildren(result);

      result.forEach(item1 => {
        item1.render = this.renderParent;
        if (item1.hasOwnProperty("children")) {
          item1.children.forEach(item2 => {
            if (item2.hasOwnProperty("children")) {
              item2.render = this.renderTwoNode;
              item2.children.forEach(item3 => {
                if (item3.hasOwnProperty("children")) {
                  item3.render = this.renderThirdNode;
                  item3.children.forEach(item4 => {
                    if (item4.hasOwnProperty("children")) {
                      item4.render = this.renderChild;
                      item4.children.forEach(item5 => {
                        item5.render = this.renderGrand;
                      });
                    } else {
                      item4.render = this.renderGrand;
                    }
                  });
                } else {
                  item3.render = this.renderGrand;
                }
              });
            } else {
              item2.render = this.renderGrand;
            }
          });
        }
      });
      return result;
    },
    addChildren(inputData) {
      for (let i = 0; i < inputData.length; i++) {
        if (inputData[i].service && inputData[i].service.length > 0) {
          inputData[i].children = inputData[i].children.concat(
            inputData[i].service
          );

          delete inputData[i].service;
        }
      }
      return inputData;
    },
    renderParent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
            "font-size": "16px",
            "font-family": "PingFangSC-Medium,PingFang SC",
            "font-weight": "400",
            color: "rgba(56,71,80,1)"
          }
        },
        [
          h("Input", {
            style: {
              display: "inline-block",
              width: "50%"
            },
            props: {
              value: data.title
            },
            on: {
              "on-blur"(e) {
                data.title = e.target.value;
              }
            }
          }),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "32px"
              }
            },
            [
              h("Button", {
                props: {
                  icon: "ios-add-circle"
                },
                style: {
                  marginRight: "8px"
                },
                on: {
                  click: () => {
                    this.append(data);
                  }
                }
              }),
              h("Button", {
                props: {
                  icon: "md-add"
                },
                style: {
                  marginRight: "8px"
                },
                on: {
                  click: () => {
                    this.appendNode(1, data);
                  }
                }
              }),
              h("Button", {
                props: {
                  icon: "md-close"
                },
                on: {
                  click: () => {
                    this.removeRoot(root, node, data);
                  }
                }
              })
            ]
          )
        ]
      );
    },
    renderTwoNode(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
            "font-size": "16px",
            "font-family": "PingFangSC-Medium,PingFang SC",
            "font-weight": "400",
            color: "rgba(56,71,80,1)"
          }
        },
        [
          h("Input", {
            style: {
              display: "inline-block",
              width: "50%"
            },
            props: {
              value: data.title
            },
            on: {
              "on-blur"(e) {
                data.title = e.target.value;
              }
            }
          }),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "32px"
              }
            },
            [
              h("Button", {
                props: {
                  icon: "ios-add-circle"
                },
                style: {
                  marginRight: "8px"
                },
                on: {
                  click: () => {
                    this.append(data);
                  }
                }
              }),
              h("Button", {
                props: {
                  icon: "md-add"
                },
                style: {
                  marginRight: "8px"
                },
                on: {
                  click: () => {
                    this.appendNode(2, data);
                  }
                }
              }),
              h("Button", {
                props: {
                  icon: "md-close"
                },
                on: {
                  click: () => {
                    this.remove(root, node, data);
                  }
                }
              })
            ]
          )
        ]
      );
    },
    renderThirdNode(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
            "font-size": "16px",
            "font-family": "PingFangSC-Medium,PingFang SC",
            "font-weight": "400",
            color: "rgba(56,71,80,1)"
          }
        },
        [
          h("Input", {
            style: {
              display: "inline-block",
              width: "50%"
            },
            props: {
              value: data.title
            },
            on: {
              "on-blur"(e) {
                data.title = e.target.value;
              }
            }
          }),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "32px"
              }
            },
            [
              h("Button", {
                props: {
                  icon: "ios-add-circle"
                },
                style: {
                  marginRight: "8px"
                },
                on: {
                  click: () => {
                    this.append(data);
                  }
                }
              }),
              h("Button", {
                props: {
                  icon: "md-add"
                },
                style: {
                  marginRight: "8px"
                },
                on: {
                  click: () => {
                    this.appendNode(3, data);
                  }
                }
              }),
              h("Button", {
                props: {
                  icon: "md-close"
                },
                on: {
                  click: () => {
                    this.remove(root, node, data);
                  }
                }
              })
            ]
          )
        ]
      );
    },
    renderChild(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
            "font-size": "16px",
            "font-family": "PingFangSC-Medium,PingFang SC",
            "font-weight": "400",
            color: "rgba(56,71,80,1)"
          }
        },
        [
          h("Input", {
            style: {
              display: "inline-block",
              width: "50%"
            },
            props: {
              value: data.title
            },
            on: {
              "on-blur"(e) {
                data.title = e.target.value;
              }
            }
          }),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "32px"
              }
            },
            [
              h("Button", {
                props: {
                  icon: "ios-add-circle"
                },
                style: {
                  marginRight: "8px"
                },
                on: {
                  click: () => {
                    this.append(data);
                  }
                }
              }),
              h("Button", {
                props: {
                  icon: "md-close"
                },
                on: {
                  click: () => {
                    this.remove(root, node, data);
                  }
                }
              })
            ]
          )
        ]
      );
    },
    renderGrand(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
            "font-size": "16px",
            "font-family": "PingFangSC-Medium,PingFang SC",
            "font-weight": "400",
            color: "rgba(56,71,80,1)"
          }
        },
        [
          h("Input", {
            style: {
              display: "inline-block",
              width: "50%"
            },
            props: {
              value: data.title
            },
            on: {
              "on-blur"(e) {
                data.title = e.target.value;
              }
            }
          }),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "32px"
              }
            },
            [
              h("Button", {
                props: {
                  icon: "md-close"
                },
                on: {
                  click: () => {
                    this.remove(root, node, data);
                  }
                }
              })
            ]
          )
        ]
      );
    },
    appendNode(num, data) {
      let render = {};
      if (num == 1) {
        render = this.renderTwoNode;
      } else if (num == 2) {
        render = this.renderThirdNode;
      } else if (num == 3) {
        render = this.renderChild;
      }
      const children = data.children || [];
      children.push({
        title:
          Math.random()
            .toString(36)
            .slice(2) + " node",
        expand: true,
        render: render,
        children: []
      });
      this.$set(data, "children", children);
    },
    append(data) {
      const children = data.children || [];
      children.push({
        title:
          Math.random()
            .toString(36)
            .slice(2) + " service",
        expand: true,
        render: this.renderGrand,
        children: []
      });
      this.$set(data, "children", children);
    },
    remove(root, node, data) {
      const parentKey = root.find(el => el === node).parent;
      const parent = root.find(el => el.nodeKey === parentKey).node;
      const index = parent.children.indexOf(data);
      parent.children.splice(index, 1);
    },
    addRoot() {
      this.treeData.push({
        title:
          Math.random()
            .toString(36)
            .slice(2) + " root",
        expand: true,
        children: [],
        render: this.renderParent
      });
    },
    removeRoot(root, node, data) {
      let index = 0;
      for (let i = 0; i < this.treeData.length; i++) {
        if (this.treeData[i].title == data.title) {
          index = i;
          break;
        }
      }
      this.treeData.splice(index, 1);
    },
    submit() {
      this.saveTree();

      let submitData = [];
      this.treeData.forEach(item1 => {
        let temp1 = {};
        if (item1.hasOwnProperty("children")) {
          temp1.children = [];
          temp1.service = [];
          let temp1Array = [];
          let temp1Service = [];
          item1.children.forEach(item2 => {
            let temp2 = {};
            if (item2.hasOwnProperty("children")) {
              temp2.children = [];
              temp2.service = [];
              let temp2Array = [];
              let temp2Service = [];
              item2.children.forEach(item3 => {
                let temp3 = {};
                if (item3.hasOwnProperty("children")) {
                  temp3.children = [];
                  temp3.service = [];
                  let temp3Array = [];
                  let temp3Service = [];
                  item3.children.forEach(item4 => {
                    let temp4 = {};
                    if (item4.hasOwnProperty("children")) {
                      temp4.children = [];
                      let temp4Array = [];
                      item4.children.forEach(item5 => {
                        let temp5 = {};
                        for (let k in item5) {
                          if (
                            k == "render" ||
                            k == "nodeKey" ||
                            k == "expand" ||
                            k == "isShowPopup" ||
                            k == "service"
                          ) {
                            continue;
                          } else if (k == "id") {
                            temp5["serviceInfo"] = item5[k];
                          } else {
                            temp5[k] = item5[k];
                          }
                        }
                        temp4Array.push(temp5);
                      });
                      temp4.children = [].concat(temp4Array);
                      temp4.service = [];
                      for (let k in item4) {
                        if (
                          k == "children" ||
                          k == "render" ||
                          k == "nodeKey" ||
                          k == "service"
                        ) {
                          continue;
                        } else {
                          temp4[k] = item4[k];
                        }
                      }
                      temp3Array.push(temp4);
                    } else {
                      temp4.service = [];
                      for (let k in item4) {
                        if (
                          k == "children" ||
                          k == "render" ||
                          k == "nodeKey" ||
                          k == "service"
                        ) {
                          continue;
                        } else {
                          temp4[k] = item4[k];
                        }
                      }
                      temp3Service.push(temp4);
                    }
                  });
                  temp3.children = [].concat(temp3Array);
                  temp3.service = [].concat(temp3Service);
                  for (let k in item3) {
                    if (
                      k == "children" ||
                      k == "render" ||
                      k == "nodeKey" ||
                      k == "service"
                    ) {
                      continue;
                    } else {
                      temp3[k] = item3[k];
                    }
                  }
                  temp2Array.push(temp3);
                } else {
                  temp3.service = [];
                  for (let k in item3) {
                    if (
                      k == "children" ||
                      k == "render" ||
                      k == "nodeKey" ||
                      k == "service"
                    ) {
                      continue;
                    } else {
                      temp3[k] = item3[k];
                    }
                  }
                  temp2Service.push(temp3);
                }
              });
              temp2.children = [].concat(temp2Array);
              temp2.service = [].concat(temp2Service);
              for (let k in item2) {
                if (
                  k == "children" ||
                  k == "render" ||
                  k == "nodeKey" ||
                  k == "service"
                ) {
                  continue;
                } else {
                  temp2[k] = item2[k];
                }
              }
              temp1Array.push(temp2);
            } else {
              temp2.service = [];
              for (let k in item2) {
                if (
                  k == "children" ||
                  k == "render" ||
                  k == "nodeKey" ||
                  k == "service"
                ) {
                  continue;
                } else {
                  temp2[k] = item2[k];
                }
              }
              temp1Service.push(temp2);
            }
          });
          temp1.children = [].concat(temp1Array);
          temp1.service = [].concat(temp1Service);
          for (let k in item1) {
            if (
              k == "children" ||
              k == "render" ||
              k == "nodeKey" ||
              k == "service"
            ) {
              continue;
            } else {
              temp1[k] = item1[k];
            }
          }
        } else {
          temp1.service = [];
          for (let k in item1) {
            if (k == "render" || k == "nodeKey") {
              continue;
            } else {
              temp1[k] = item1[k];
            }
          }
        }
        submitData.push(temp1);
      });

      this.axios.post("/tree", { treeData: submitData }).then(res => {
        if (res.data.code == 200) {
          this.$Message.info("树结构配置成功！");
        } else {
          this.$Message.info("树结构配置失败！");
        }
      });
    },
    saveTree() {
      let result = [];
      this.treeData.forEach(item1 => {
        let temp1 = item1.title;
        if (item1.hasOwnProperty("children") && item1.children.length > 0) {
          item1.children.forEach(item2 => {
            let temp2 = item2.title;
            if (item2.hasOwnProperty("children") && item2.children.length > 0) {
              item2.children.forEach(item3 => {
                let temp3 = item3.title;
                if (
                  item3.hasOwnProperty("children") &&
                  item3.children.length > 0
                ) {
                  item3.children.forEach(item4 => {
                    let temp4 = item4.title;
                    if (
                      item4.hasOwnProperty("children") &&
                      item4.children.length > 0
                    ) {
                      item4.children.forEach(item5 => {
                        let temp5 = item5.title;
                        result.push(
                          temp1 +
                            "/" +
                            temp2 +
                            "/" +
                            temp3 +
                            "/" +
                            temp4 +
                            "/" +
                            temp5
                        );
                      });
                    }
                    result.push(
                      temp1 + "/" + temp2 + "/" + temp3 + "/" + temp4
                    );
                  });
                }
                result.push(temp1 + "/" + temp2 + "/" + temp3);
              });
            }
            result.push(temp1 + "/" + temp2);
          });
        }
        result.push(temp1);
      });
      this.$store.dispatch("oneMapConfig/updateTreeRoute", result);
      this.$store.dispatch("oneMapConfig/updateTreeData", this.treeData);
    }
  }
};
</script>
<style scoped>
.mainConfigTree {
  width: 30%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  float: left;
}
.root {
  margin-right: 12px;
  height: 40px;
}
.root button {
  width: 72px;
  height: 32px;
  float: right;
  margin-right: 8px;
  text-align: center;
  padding: 1px;
}
.mainButton {
  margin-top: 20px;
}
.mainButton button {
  float: right;
  margin-right: 8px;
}
</style>
